<table id="table" style="height:500px;">
</table>

<script>

    $(function(){
        $('#table').datagrid({
            cls:"theme-datagrid",
            fit:true,
            title:"人员管理",
            singleSelect:true,
            selectOnCheck:false,
            checkOnSelect:false,
            showFooter:true,
            cache:false,
            pagination : true,//显示页码
            pageSize : 10,//初始化每页显示的条数
            pageList : [ 10, 20, 50, 100 ],//可以调节的每页显示条数
            sortName:"gmtCreate",
            rownumbers:true,//显示序号
            collapsible:true,
            url:'/sysUser/page.html',
            toolbar:[{
                text:'新增',
                iconCls:'icon-add',
                handler:function(){to_save(null);}
            },{
                text:'删除',
                iconCls:'icon-remove',
                handler:function(){do_delete();}
            },'-',{
                text:'保存',
                iconCls:'icon-save',
                handler:function(){do_save();}
            }],
            columns:[[
                {field:'ck',title:'代码',checkbox:true},
                {field:'username',title:'用户名',width:80,sortable: true},
                {field:'realname',title:'真实姓名',width:100,formatter:text,sortable: true},
                {field:'email',title:'邮箱',width:100,align:'left'},
                {field:'phone',title:'电话',width:100,align:'left'},
                {field:'isLock',title:'状态',width:80,formatter:lock,align:'center'},
                {field:'gmtCreate',title:'创建时间',width:130,align:'center',sortable: true},
                {field:'operate',title:'操作',width:120,align:'center',formatter:operate},
                {field:'more',title:'更多',width:80,align:'right',formatter:more},
            ]],
            onLoadSuccess:function(data){
                $('.more').menubutton({
                    plain:false,
                    menu: '#more_menu'
                });
                $('#more_menu').menu({
                    onClick:function(item){

                        var a=$('.more').menubutton("options");
                        switch (item.name)
                        {
                            case "undo":
                                alert("undo "+a.value);
                                break;
                            case "redo":
                                alert("redo "+a.value);
                                break;
                            case "cut":
                                alert("cut "+a.value);
                                break;
                            case "copy":
                                alert("copy "+a.value);
                                break;
                            case "paste":
                                alert("paste "+a.value);
                                break;
                            case "delete":
                                alert("delete "+a.value);
                                break;
                        }
                    }
                });

                $('.progressbar').progressbar({});

                $('.switchbutton').switchbutton({
                    height:23
                });

                $('.button-delete').linkbutton({
                });
                $('.button-edit').linkbutton({
                });

                $('.text').textbox({
                    width:70,
                    height:30
                })



                $('.operate-append,.operate-edit,.operate-delete').linkbutton({});
                $('.operate-append').on('click', function(){
                    var a=$(this).linkbutton("options");
                    alert("append "+a.value);
                });
                $('.operate-edit').on('click', function(){
                    var a=$(this).linkbutton("options");
                    alert("edit "+a.value);
                });
                $('.operate-delete').on('click', function(){
                    var a=$(this).linkbutton("options");
                    alert("delete "+a.value);
                });
            }
        });

    })
    function more(value,row,index){
        return "<a href='javascript:void(0)' class='more' data-options='value:"+value+",iconCls:\"icon-set\"'></a>";
    }
    function lock(value,row,index){
        var status = '';
        if(row&&row.isLock==1){
            status = 'checked';
        }
        return "<input class='switchbutton' "+status+">";
    }
    //动态在表格中增加链接
    function operate(value,row,index){
        return "<a href='#' class='button-delete button-danger'>删除</a> <a href=\"javascript:to_save('"+row.id+"')\" class='button-edit button-default'>编辑</a>";
    }
    //动态在表格中增加控件
    function text(value,row,index){
        return "<input class='text' value='"+value+"'>";
    }
    //在窗口中新增或编辑表格数据
    function to_save(id){
        $('#win').window({
            title:'新建/编辑用户',
            href:'/sysUser/preSave.html',
            queryParams:{id:id},
            width:'600',
            height:'550',
            modal:true,
            iconCls:'icon-save'
        });

    }
    function do_delete(id){

    }
    function do_save(){

    }
</script>
<div id="more_menu" style="width:150px;">
    <div data-options="name:'info'">详情</div>
    <div data-options="name:'department'">部门</div>
    <div data-options="name:'role'">角色</div>
    <div class="menu-sep"></div>
    <div data-options="name:'delete'">删除</div>
</div>
<div id="win"></div>
